<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // const root = ReactDOM.createRoot(document.querySelector("#root"));
    
    // root.render((
    //     <div></div>
    // ))

    // 1. dom容器 和 react的根节点需要是一一对应的,虽然可以正常渲染，但是控制台会有警告
    // const root1 = ReactDOM.createRoot(document.querySelector("#root"));
    // const root2 = ReactDOM.createRoot(document.querySelector("#root"));
    
    // root2.render('root2')
    // root1.render('root1')

    // 2. render函数可以重复调用，后面的会覆盖前面的
    // const root = ReactDOM.createRoot(document.querySelector("#root"));
    // root.render('第一次渲染');
    // root.render('第二次渲染');

    // 3. 根节点不要使用 body 和 html
    // const root = ReactDOM.createRoot(document.body); // body
    const root = ReactDOM.createRoot(document.documentElement); // html
    root.render('第一次渲染');
    
</script>
</html>